import React, { Component } from 'react';
import { Motion, spring } from 'react-motion';
import { Tabs } from 'antd';
import { Collapse, Radio, Icon } from 'antd';
import DataPanel from './DataPanel';
import { Scrollbars } from 'react-custom-scrollbars';
const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;

class DataControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      panelFold: false,
    };
  }

  handlePanelFolded = () => {
    this.setState({
      panelFold: !this.state.panelFold,
    });
  };

  handleSelectData = (item) => {
    const { onSelectData } = this.props;
    console.log(item)
    if (onSelectData) {
      onSelectData(item);
    }
  };

  handleResetState=()=>{
    const { onResetState } = this.props;
    if (onResetState) {
      onResetState();
    }
  }

  render() {
    const { panelFold } = this.state;
    const { style, dataConfig, dataLevel, width, height } = this.props;
    return (
      <Motion style={{ x: spring(panelFold ? 48 : width), y: spring(panelFold ? 48 : height) }}>
        {({ x, y }) => (
          <div
            style={{
              ...style,
              display: 'flex',
              flexDirection: 'column',
              width: `${x}px`,
              height: `${y}px`,
              color: '#fff',
              backgroundColor: 'rgba(0,0,0,0.6)',
            }}
          >
            <div
              style={{
                lineHeight: '48px',
                height: 48,
                borderBottom: '1px Solid rgb(238,238,238,0.5)',
                textAlign: 'center',
              }}
            >
              <div style={{ float: 'left', width: 48, height: 48, fontSize: 18,cursor:'pointer' }}>
                <Icon
                  type={panelFold ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.handlePanelFolded}
                />
              </div>
              <span
                style={{ float: 'right', marginRight: 20, display: panelFold ? 'none' : 'block' }}
              >
                 <Icon
                  type={'picture'}
                  style={{fontSize:18,cursor:'pointer'}}
                  onClick={this.handleResetState}
                />
              </span>
            </div>
            <div style={{ flex: 1, display: panelFold ? 'none' : 'block' }}>
              <Tabs
                style={{
                  height: '100%',
                  overflow: 'hidden',
                  color: '#fff',
                  backgroundColor: 'rgba(0,0,0,0)',
                }}
                size="large"
                tabPosition="left"
                tabBarGutter={5}
              >
                {dataConfig.map((item, index) => {
                  return (
                    <TabPane
                      tab={
                        <span>
                          <Icon type={item.icon} />
                          {item.title}
                        </span>
                      }
                      key={index}
                    >
                      <Scrollbars style={{ height: y - 48 }}>
                        <DataPanel
                          data={item.children}
                          onSelectData={this.handleSelectData}
                        />
                      </Scrollbars>
                    </TabPane>
                  );
                })}
              </Tabs>
            </div>
          </div>
        )}
      </Motion>
    );
  }
}

export default DataControl;
